<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大屏渲染</title>
  <link rel="stylesheet" href="../static/css/atom.css">
</head>

<body>
  <div id="container"></div>

  <script type="importmap">
        {
          "imports": {
            "three": "../three/v170/three.module.min.js",
            "three/addons/": "../three/v170/"
          }
        }
      </script>

  <script type="module">
    import * as THREE from 'three';
    import { CSS2DRenderer, CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
    import { CSS3DRenderer, CSS3DObject } from "three/addons/renderers/CSS3DRenderer.js";
    import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { DragControls } from 'three/addons/controls/DragControls.js';
    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

    console.log(`[THREE版本]`, THREE.REVISION);

    let camera, scene, renderer;
    let controls;
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    init();
    animate();

    function init() {
      const container = document.getElementById('container');
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
      camera.position.set(50, 50, 50);
      scene = new THREE.Scene();
      const geometry = new THREE.BoxGeometry(20, 20, 20);
      const textureLoader = new THREE.TextureLoader();

      // 6个面设置不同的颜色
      const materials = [
        new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 红色
        new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 绿色
        new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 蓝色
        new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黄色
        new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 品红色
        new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 青色
      ];
      const cube = new THREE.Mesh(geometry, materials);
      scene.add(cube);

      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xADD8E6, 1);// 设置背景颜色
      container.appendChild(renderer.domElement);

      controls = new OrbitControls(camera, renderer.domElement);// 添加控制器
      controls.enablePan = true;// 添加平移功能

      var axesHelper = new THREE.AxesHelper(1000);
      scene.add(axesHelper);// 创建坐标轴辅助对象

      const gui = new GUI({
        title: '常规控制'
      });
      const cubeParams = {
        x: 0,
        y: 0,
        z: 0,
      };
      let update_x = gui.add(cubeParams, 'x', -10, 10).name('x').onChange((value) => {
        cube.position.x = value;
      });
      let update_y = gui.add(cubeParams, 'y', -10, 10).name('y').onChange((value) => {
        cube.position.y = value;
      });
      let update_z = gui.add(cubeParams, 'z', -10, 10).name('z').onChange((value) => {
        cube.position.z = value;
      });

      function onDoubleClick(event) {
        event.preventDefault();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(scene.children);
        if (intersects.length > 0) {
          const point = intersects[0].point;
          cube.position.x = point.x;
          cube.position.y = point.y;
          cube.position.z = point.z;

          update_x.setValue(point.x);
          update_y.setValue(point.y);
          update_y.setValue(point.z);
        }
      }
      window.addEventListener('dblclick', onDoubleClick, false);
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
  </script>

</body>

</html>